<template>
  <div class="back">
    <el-container>
      <el-header height="10%">
        <div class="header-div">
          <img class="img-title" src="@/assets/img/index/title.png" />
          <div class="header-font">桐庐县江南镇人民政府</div>
        </div>
        <div style="width: 400px; margin-top: 15px; margin-right: 18px">
          <el-input
            v-model="search"
            placeholder="搜索"
            style="width: 380px; position: relative; padding-right: 15px"
            size="small"
            @keyup.enter.native="doSearch"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="doSearch"
              style="position: absolute; right: 15px"
            ></i>
          </el-input>
        </div>
        <div class="user">
          <span class="username">{{ username }}</span>
          <span><el-avatar :size="40" :src="avatar"></el-avatar></span>
        </div>
      </el-header>
      <el-container>
        <el-aside width="12%">
          <div class="left-region">
            <div class="goback" @click="back">
              <img class="img-back" src="@/assets/img/back.png" />
              <span>返回</span>
            </div>
            <div :class="['nav', { active: show[0] }]" @click="showMeet">
              信访处理流程创建
            </div>
          </div>
        </el-aside>
        <el-main>
          <div class="right-region">
            <div class="newMeet" v-show="show[0]">
              <div class="meet-head">
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item >流程表单</el-breadcrumb-item>
                  <el-breadcrumb-item >流程图</el-breadcrumb-item>
                  <el-breadcrumb-item>流程状态</el-breadcrumb-item>
                  <el-breadcrumb-item>正文</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="meet-button-all">
                  <el-button class="meet-button" size="mini">提交</el-button>
                  <el-button class="meet-button" size="mini">保存</el-button>
                </div>
              </div>
              <div class="division"></div>
              <div style="width: 50%">
                <h1 style="text-align: center; color: #57a5ffdc">
                  信访件内部处理流程
                </h1>
                <table border="1">
                  <tr>
                    <td>信访件编号</td>
                    <td colspan="5"><el-input type="text" placeholder="[必填]"/></td>
                    <!-- <td></td>
                    <td></td>
                    <td></td>
                    <td></td> -->
                  </tr>
                  <tr>
                    <td>信访日期</td>
                    <td><el-input type="text" placeholder="[必填]"/></td>
                    <td>期限答复</td>
                    <td><el-input type="text" placeholder="[必填]"/></td>
                    <td>限办天数</td>
                    <td><el-input type="text" placeholder="[必填]"/></td>
                  </tr>
                  <tr>
                    <td>信访文件</td>
                    <td colspan="5"><el-input type="text" placeholder="[必填]"/> <el-button type="primary">上传附件</el-button></td>
                    <!-- <td></td>
                    <td></td>
                    <td></td>
                    <td></td> -->
                  </tr>
                  <tr>
                    <td>领导意见</td>
                    <td colspan="5"><el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5}" placeholder="[必填]" v-model=" textarea"/></td>
                    <!-- <td></td>
                    <td></td>
                    <td></td>
                    <td></td> -->
                  </tr>
                  <tr>
                    <td>经办人处理情况</td>
                    <td colspan="5"><el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5}" placeholder="[必填]" v-model=" textarea2"/></td>
                    <!-- <td></td>
                    <td></td>
                    <td></td>
                    <td></td> -->
                  </tr>
                </table>
                <mavon-editor v-model="formData.content"/>
              </div>
            </div>
            <div class="newMess" v-show="show[1]">审批信息录入</div>
            <!-- <div class="newMess" v-show="show[2]">批后管理</div> -->
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: [true, false],
      username: "用户名",
      avatar: "",
      search: "", //搜索内容
      option: [],
      textarea: '',
      textarea2: '',
      formData:{content:''}
    };
  },
  methods: {
    showMeet() {
      this.show.splice(0, 1, true);
      this.show.splice(1, 1, false);
      // this.show.splice(1, 1,3, false)
    },
    showMess() {
      this.show.splice(0, 1, false);
      this.show.splice(1, 1, true);
      // this.show.splice(1, 1,3, false)
    },
    // showMees(){
    //     this.show.splice(0, 1, false)
    //     this.show.splice(1, 1, false)
    //     this.show.splice(1, 1,3, true)
    // },
    //搜索框点击搜索
    doSearch() {
      console.log(this.search);
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.el-header {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
.el-aside {
  height: 10%;
  margin-left: 40px;
  padding: 5px 10px 5px 10px;
  background-color: rgb(60, 136, 172);
  border-radius: 8px;
  overflow: hidden;
  color: white;
}
.el-main {
  height: 95%;
  margin-right: 100px;
  margin-left: 20px;
  border-radius: 10px;
  background-color: white;
}
.back {
  background: url("../../assets/img/background.png");
  display: flex;
  height: 100%;
  vertical-align: top;
}
.right-region {
  width: 100%;
  height: 98%;
}
.img-title {
  width: 190px;
  height: 190px;
  margin-top: -45px;
  margin-left: -50px;
}
.header-div {
  margin-top: -20px;
  vertical-align: middle;
  display: flex;
}
.header-font {
  font-size: 35px;
  margin-top: 30px;
  margin-left: -50px;
  color: white;
}
.user * {
  font-size: 15px;
  vertical-align: middle;
  margin-top: 10px;
}
.user {
  margin-right: 80px;
}
.nav {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  margin-bottom: 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 8px;
}
.active {
  background-color: rgb(245, 170, 32);
}
.img-back {
  width: 20px;
  height: 20px;
}
.goback * {
  font-size: 15px;
  vertical-align: middle;
}
.goback {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 10px;
}
/* 新建会议第一层样式 */
.meet-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 15px;
}
/* 会议单个按钮样式 */
.meet-button {
  background-color: rgb(60, 136, 172);
  color: white;
  border-radius: 5px;
}
/* 分割线 */
.division {
  width: 100%;
  margin: 0 auto;
  height: 2px;
  background-color: rgb(184, 184, 184);
}
/* 按钮区域样式 */
.meet-button-all {
  margin-right: 60px;
}
</style>